<!-- 车载box数据查询 -->
<template>
  <div class="page-container">
    <list-searcher :searchList="searchList" v-model:searchForm="queryParam" @loadData="loadData" @change="searchChange" />
    <table-index :table="table" @loadData="loadData" />
  </div>
</template>

<script setup name="CarBoxQueryList">
  import { getCarTboxVehicleList } from '@/api/asset/carTbox'
  import { onMounted, reactive, computed } from 'vue'
  import { useTable, useFetchTableDataApi } from '@/hooks/table'

  import useNavigate from '@/hooks/useNavigate'
  const { navigateTo } = useNavigate()

  import { usePageDict } from '@/hooks/useDict'
  const carTboxVehicleDict = usePageDict('carTboxVehicleDict')

  // 查询条件
  const searchList = computed(() => {
    return [
      { label: '设备sn/id', prop: 'vehicleSnLike', type: 'a-input' },
      { label: '设备code', prop: 'vehicleCodeLike', type: 'a-input' },
      {
        label: '设备供应商',
        prop: 'vehicleFirm',
        type: 'a-select',
        options: carTboxVehicleDict.vehicleFirmEnums,
      },
      {
        label: '设备状态',
        prop: 'vehicleStatus',
        type: 'a-select',
        options: carTboxVehicleDict.vehicleStatusEnums,
      },
    ]
  })
  // 接口参数（不包含page信息）
  const queryParam = reactive({})

  // table 配置
  const table = useTable({
    columns: [
      { title: '设备sn/id', dataIndex: 'vehicleSn' },
      { title: '设备code', dataIndex: 'vehicleCode' },
      { title: '设备供应商', dataIndex: 'vehicleFirm' },
      { title: '设备状态', dataIndex: 'vehicleStatusName' },
    ],
    operates: [
      {
        label: '设备状态',
        permission: 'svms:asstes:device:car-box-query.status',
        method: (record) => {
          // 设备状态:34
          navigateTo(`/car-box-query/detail/${record.id}?activeType=1`, `车载box数据查询-详情`)
        },
      },
      {
        label: '驾驶事件',
        permission: 'svms:asstes:device:car-box-query.driver',
        method: (record) => {
          // 驾驶事件:35
          navigateTo(`/car-box-query/detail/${record.id}?activeType=2`, `车载box数据查询-详情`)
        },
      },
    ],
  })
  // 列表接口调用
  const loadData = useFetchTableDataApi(table, queryParam, getCarTboxVehicleList)

  onMounted(() => {
    loadData()
  })
</script>
